import { useCallback, useMemo, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { ArrowLeft, Ellipsis } from '@react-vant/icons';
import TopTitleBar from "../../components/TopTitleBar";
import { Image, Form, Button, Input } from 'react-vant';
import axios from '../../utils/axios';
import md5 from 'js-md5';
import './index.css';
const Login = () => {
    const [form] = Form.useForm();
    const navigate = useNavigate();
    // 这个 useState 应该是放到 父组件哦！
    const [isLogin, setIsLogin] = useState('false');
    const [loginType, setLoginType] = useState('login')
    const loginImageSrc = 'https://s.yezgea02.com/1604045825972/newbee-mall-vue3-app-logo.png';
    const loginText = useMemo(() => {
        let loginTitle;
        let changeLoginFlag;
        if (loginType === 'login') {
            loginTitle = '登录';
            changeLoginFlag = '立即注册';
        }
        if (loginType === 'register') {
            loginTitle = '注册';
            changeLoginFlag = '已有登录账号';
        }
        return { loginTitle, changeLoginFlag }
    }, [loginType])

    const onFinish = val => {
        if (loginType === 'login') {
            axios.post('/api/v1/user/login', {
                loginName: val.userName,
                passwordMd5: md5(val.password)
            })
                .then(function (response) {
                    if (response.data.message === 'SUCCESS') {
                        // 把 返回的token 存在 本地；
                        localStorage.setItem('Token', JSON.stringify(response.data.data));
                        // 跳转到 home 页面：
                        navigate('/',
                            { replace: true }
                        )
                    }
                })
        }

        if (loginType === 'register') {
            axios.post('/api/v1/user/register',
                {
                    loginName: val.userName,
                    password: val.password
                }
            )
                .then(res => {})
        }
    }

    const changeLoginType = useCallback((loginType) => {
        if (loginType === 'login') {
            setLoginType('register')
        }
        if (loginType === 'register') {
            setLoginType('login');
        }
        // 并且要把 这个 form 清空！
        form.setFieldsValue(
            {
                userName: '',
                password: ''
            }
        );
    }, [loginType])
    return (
        // form 表单：
        <Form className="login"
            form={form}
            onFinish={onFinish}
            initialValues={
                {
                    userName: '',
                    password: ''
                }
            }
            footer={
                <div
                >
                    <Button
                        nativeType='submit'
                        className='loginButton' >
                        {
                            loginText.loginTitle
                        }
                    </Button>
                </div>
            }
        >
            <TopTitleBar
                leftIcon={
                    <ArrowLeft onClick={() => navigate(-1)} />
                }
                intermediateContentText={
                    loginText.loginTitle
                }
                rightIcon={
                    <Ellipsis />
                }
            />

            <div className="loginIcon">
                <Image width='120' height='120' src={loginImageSrc} />
            </div>
            <Form.Item
                className="loginText"
                label='用户名：'
                name='userName'
                rules={[{ required: true, message: '请填写用户名' }]}
            >
                <Input
                    className="userName, loginRightText"
                    placeholder='用户名'
                />
            </Form.Item>
            <Form.Item
                className="loginText"
                label='密码：'
                name='password'
                rules={[{
                    required: true,
                    message: '请填写密码'

                }]}
            >
                <Input
                    className="password, loginRightText"
                    placeholder='密码'
                />
            </Form.Item>
            <Form.Item
                className="loginText"
                label='验证码：'
            >
                <Input
                    placeholder='输入验证码'
                    className="verificationCode, loginRightText"
                />
            </Form.Item>
            <div className={['loginText', 'loginFlag'].join(' ')}>
                {/* 标志：是否为登录 */}
                {/* (loginType) => changeLoginType(loginType)}
                    第一个参数：有东西，证明了什么？？
                */}
                <div onClick={() => changeLoginType(loginType)}>
                    {loginText.changeLoginFlag}
                </div>
            </div>
        </Form>
    )
}

export default Login;